<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP地址</th>
							<th>执行时间</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					  <tr>
					    <td colspan="7">数据正在加载中....</td>
					  </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			    <!-- 加载分页页面 --> 
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
   $(function(){
	 //分页页面加载完成，异步加载日志列表数据
     $("#pageId").load("doPageUI.do",function(){
    	 doGetObjects();
     });
     //查询按钮事件注册
     //在input-group-btn对象的子元素btn-search
     //上注册一个click事件
     $(".input-group-btn")
     .on("click",".btn-search",doQueryObjects)
     .on("click",".btn-delete",doDeleteObjects)
     
     //设置thead中checkbox对象的状态监听
     //$("#checkAll").change(doChangeTBodyCheckBoxState);
     $("thead").on("change","#checkAll",doChangeTBodyCheckBoxState);
   
     //设置tbody中checkbox对象的状态监听
     $("#tbodyId").on("change",'.cBox',doChangeTHeadCheckBoxState);
     //$(".cBox").change(doChangeTHeadCheckBoxState);不可以
   });
   
   //修改thead中checkbox对象的状态
   function doChangeTHeadCheckBoxState(){
      //1.获取tbody中所有checkbox对象状态&&操作的结果
      var flag=true;
      $("#tbodyId input[type='checkbox']")
      .each(function(){
    	  flag=flag&&$(this).prop("checked");
      });
      //2.设置thead中checkbox的状态值
      $("#checkAll").prop("checked",flag);
   }
   
   
   //修改tbody中checkbox对象的状态
   function doChangeTBodyCheckBoxState(){
	   //1.获取thead中checkbox对象的状态
	   var state=$(this).prop("checked");
	   //2.设置tbody中checkbox对象的状态
	   //方法1
	   //$("#tbodyId input[type='checkbox']")
	   //.each(function(){
		   $(this).prop("checked",state);
	   //})
	   //方法2
	   $("#tbodyId input[type='checkbox']")
	   .prop("checked",state);
   }
   
   function doGetCheckedIds(){
	   //<input type='checkbox' value='1' checked=true>
	   //1.定义一数组
	   var array=[];//new Array();
	   //2.获取选中的checkbox的值并将其存储到数组
	   //2.1获取tbody中的所有类型为checkbox的input元素
	   $("#tbodyId input[type='checkbox']")
	   //2.2迭代所有checkbox对象
	   .each(function(){
		   //2.3判定checked属性的值，假如为true表示选中
		   if($(this).prop("checked")){
			   //向数组放数据(input元素value属性的值)
			   array.push($(this).val());
		   }
	   })
	   //3.返回数组
	   return array;
   }
   
   //执行删除操作
   function doDeleteObjects(){
	   if(!confirm("您确认删除吗"))return;
	   //1.定义请求的url
	   var url="log/doDeleteObjects.do";
	   //2.定义请求的参数
	   var ids=doGetCheckedIds();//array
	   if(ids.length==0){
		   alert("请选择");
		   return;
	   }
	   var params={"ids":ids.toString()};//ids=1,2,3,4
	   //3.执行异步删除操作
	   $.post(url,params,function(result){
		  if(result.state==1){
			  alert(result.message);
			  //修改页码值
			  doChangePageCode();
			  doGetObjects();
		  }else{
			  alert(result.message);
		  }
	   });
   }
   //修改页码值
   function doChangePageCode(){
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   var pageCount=$("#pageId").data("pageCount");
	   var state=$("#checkAll").prop("checked");
	   if(state&&pageCurrent==pageCount&&pageCurrent>1){
			pageCurrent--;
			$("#pageId")
			.data("pageCurrent",pageCurrent);
	   }
   }
   //执行查询操作
   function doQueryObjects(){
	   //重新初始化页码值
	   $("#pageId").data("pageCurrent",1);
	   //执行查询操作
	   doGetObjects();
   }
   //异步请求服务端日志数据并进行局部更新操作
   function doGetObjects(){
	  $("#checkAll").prop("checked",false);
	  //debugger
	  //1.请求url?
	  var url="log/doFindPageObjects.do";
	  //2.请求参数
	  var pageCurrent=$("#pageId").data("pageCurrent");
	  if(!pageCurrent)pageCurrent=1;
	  var params={"pageCurrent":pageCurrent};
	  //获取用户在搜索框输入的用户名
	  var username=$("#searchNameId").val();
	  if(username)params.username=username;
	  //3.发起异步请求(getJSON是jquery中ajax函数)
	  //3.1get请求
	  //3.2JSON表示此方法会将json串转换json格式对象
	  $.getJSON(url,params,function(result){//JsonResult
		  //debugger
		  //console.log("result",result);
	      //处理结果
	      doHandleResponseResult(result);
	  });
   }
   //处理服务端响应的数据
   function doHandleResponseResult(result){//JsonResult
	   console.log(result);
	   if(result.state==1){//正常数据
		  //设置table对象中tbody部分的内容
		  doSetTableBodyRows(result.data.records); 
	      //设置pageId位置对应的分页数据
	      doSetPagination(result.data);//pageObject
	   }else{//异常数据
		  alert(result.message) 
	   }
   }
   //设置table对象中tbody部分的内容
   function doSetTableBodyRows(records){
	   console.log(records);
	   //1.获取tbody对象并清空数据
	   var tBody=$("#tbodyId");
	   tBody.empty();//清空数据
	   //2.将记录records追加到tbody中
	   //for(var i=0;i<records.length;i++){}
	   //2.1迭代记录
	   for(var i in records){
		  //2.2 构建tr对象(行)
		  var tr=$("<tr></tr>");
		  //2.3 构建多个td对象(列)
		  var tds=doCreateTds(records[i]);
		  //2.4 将td追加到tr中
		  tr.append(tds);
		  //2.5 将tr追加到tbody中
		  tBody.append(tr);
	   }
   }
   //创建多个tds对象
   function doCreateTds(row){
	   var tds=
        "<td><input type='checkbox' class='cBox' value='"+row.id+"'></td>"+
		"<td>"+row.username+"</td>"+
		"<td>"+row.operation+"</td>"+
		"<td>"+row.method+"</td>"+
		"<td>"+row.params+"</td>"+
		"<td>"+row.ip+"</td>"+
		"<td>"+new Date(row.createdTime).toLocaleString()+"</td>";
	   return tds;
  }
</script>




